<template>
	<view class="col">
		<view class="head">
			<HeaderVue title="产品广场"></HeaderVue>
			<view class="search row-h-center">
				<image src="/static/images/search.png" class="icon"></image>
				<input placeholder="产品名称 | 厂家名称" placeholder-class="place" />
			</view>
			<view class="row tag">
				<view class="tags-y no-wrap " v-for="item in 10">
					{{item}}类型
				</view>
			</view>
		</view>
		<view class="row-wrap row-between-center" style="margin-left: 31rpx;margin-right: 31rpx;">
			<view class="item" v-for="item in 7" @click="goItem(item)">
				<view class="item-img">
				</view>
				<view style="padding: 0 15rpx;">
					<view class="item-title singe-line" style="margin-top: 10rpx;">
						罗马仕移动储能电源
					</view>
					<view class="row-h-center" style="margin-top: 10rpx;">
						<view class="item-market">市场价</view>
						<view class="item-market2">¥2000.00</view>	
					</view>
					<view class="row-h-center" style="margin-top: 10rpx;">
						<view class="item-market">采购价</view>
						<view class="item-market3">¥2000.00</view>	
					</view>
					<view class="row-h-center" style="margin-top: 10rpx;">
						<view class="item-price">佣金</view>
						<view class="item-price2 "><span class="item-price3">¥</span>2000.00</view>	
					</view>
				</view>
		
			</view>
		</view>
	

	</view>
</template>

<script>
	import HeaderVue from '@/components/Header.vue'
	export default {
		components: {
			HeaderVue
		},
		data() {
			return {

			}
		},
		methods: {
			goItem(){
				uni.navigateTo({
					url:'/src/pages/products/details'
				})
			}
		}
	}
</script>
<style >
	page {
		background-color: #F6F7F9;
	}
</style>
<style lang="scss" scoped>
	.head {
		width: 100%;
		background: linear-gradient(180deg, #C9D3F6 0%, rgba(201, 211, 246, 0) 100%);
	}

	.search {
		margin-left: 31rpx;
		margin-right: 31rpx;
		margin-top: 20rpx;
		padding: 22rpx 33rpx;
		background: #FFFFFF;
		border-radius: 46rpx;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.place {
		font-weight: 400;
		font-size: 29rpx;
		color: #82828C;
		line-height: 46rpx;
	}
	.tags-y{
		padding: 6rpx 32rpx;
		background: #0D59D1;
		border-radius: 25rpx ;
		font-weight: 400;
		font-size: 25rpx;
		color: #FFFFFF;
		line-height: 42rpx;
		margin-right: 20rpx;
	}
	.tags-n{
		margin-right: 20rpx;
		padding: 6rpx 32rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		font-weight: 400;
		font-size: 25rpx;
		color: #17161B;
		line-height: 42rpx;
	}
	.tag{
		margin-top: 31rpx;
		margin-left: 31rpx;
		width: calc(100% - 31rpx);
		overflow-x: scroll;
	}
	.item{
		background-color: white;
		margin-top: 16rpx;
		margin-right: 10rpx;
		width: 48%;
		height: 544rpx;
	
		border-radius: 25rpx ;
		.item-img{
			border-radius: 25rpx 25rpx 0 0  ;
			width: 100%;
			height: 333rpx;
			background: red;
		}
		.item-title{
			font-weight: 500;
			font-size: 29rpx;
			color: #17161B;
			line-height: 46rpx;
		}
		.item-market{
			font-weight: 400;
			font-size: 21rpx;
			color: #17161B;
			line-height: 38rpx;
		}
		.item-market2{
			margin-left: 10rpx;
			font-weight: bold;
			font-size: 21rpx;
			color: #02AD69;
			line-height: 38rpx;
		}
		.item-market3{
			margin-left: 10rpx;
			font-weight: bold;
			font-size: 21rpx;
			color: #17161B;
			line-height: 38rpx;
		}
		.item-price{
			font-weight: 400;
			font-size: 21rpx;
			color: #17161B;
			line-height: 38rpx;
		}
		.item-price2{
			margin-left: 35rpx;
			font-weight: bold;
			font-size: 38rpx;
			color: #DF282C;
			line-height: 54rpx;
		}
		.item-price3{
			padding-top: 10rpx;
			font-weight: 400;
			font-size: 21rpx;
			color: #DF282C;
			line-height: 38rpx;
		}
	}
	
</style>